/*
 * @Author: 曹澳龙
 * @Date: 2023-08-02 11:58:10
 * @LastEditTime: 2023-08-02 11:58:10
 * @LastEditors: 曹澳龙
 * @Description:
 *
 */

import {Component} from "react";
import PropTypes from "prop-types";
import "./index.css";

class Item extends Component<any, any> {

    static propTypes = {
        id: PropTypes.any,
        name: PropTypes.string,
        done: PropTypes.bool
    }

    state = {
        mouse: false
    }

    handleMouse = (enter: boolean) => {
        return (_: any) => {
            this.setState({
                mouse: enter
            })
        }
    }

    handleCheck = (id: any) => {
        return (e: any) => {
            const {updateTodo} = this.props;
            updateTodo(id, e.target.checked);
        }
    }

    handleDelete = (id: any) => {
        if (window.confirm("确定删除吗?")) {
            const {deleteTodo} = this.props;
            deleteTodo(id);
        }
    }

    render() {
        const {id, name, done} = this.props;
        const {mouse} = this.state;
        return (
            <li style={{backgroundColor: mouse ? '#DDD': '#FFF'}}
                onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
                    <span>{name}</span>
                </label>
                <button
                    style={{visibility: mouse ? 'visible' : 'hidden'}}
                    className="btn btn-danger"
                    onClick={() => {this.handleDelete(id)}}>删除</button>
            </li>
        )
    }
}

export default Item;